<!-- 小程序登录-完善信息 -->
<template>
	<view class="perfectMessage">
		<!-- 头像 -->
		<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			<image class="avatar" mode="aspectFit" :src="avatarUrl"></image>
		</button>

		<!-- 昵称 -->
		<view class="input">
			<input type="nickname" v-model="formData.nickName" class="weui-input" placeholder="请输入昵称"
				@blur="setInputData" />
		</view>

		<!-- 手机号 -->
		<view class="input code">
			<view class="code-input">
				<input type="number" class="weui-input" placeholder="请输入手机号" @input="setInputData2" />
			</view>

			<!-- 验证码按钮 -->
			<view class="">
				<u-button class="code-button" type="success" color="linear-gradient(180deg, #E27C8A 0%, #EC606F 100%)" :disabled="disabled" @tap="getCode">{{tips}}</u-button>
			</view>
		</view>

		<!-- 验证码 -->
		<view class="input">
			<input type="number" class="weui-input" :maxlength="4" placeholder="请输入验证码" :value="codeValue" @input="setInputData3" />
		</view>

		<view class="button" @click="submit">确认修改</view>


	</view>
</template>

<script>
	const defaultAvatarUrl =
		'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

	// api引入
	import {
		setUserUpdate, // 更新用户信息
		setUploadBase64Api, // base64上传
	} from '@/api/user.js'
	import {
		getAuthCreateCodeApi, // 发送短信
		// getAuthregisterApi, // 验证短信
	} from '@/api/activity.js'
	import {
		base64ToFile
	} from '@/utils/index.js'
	
	// 引入公共方法
	import text from '@/utils/test.js'

	// 引入vuex
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'


	export default {
		data() {
			return {
				avatarUrl: defaultAvatarUrl, // 头像


				base64: '',

				// Authorization: '',


				// 验证码
				tips: '获取验证码',
				disabled: false, // 获取验证码是否禁用
				codeValue: '', // 验证码

				formData: {
					avatarUrl: '', // 用户头像
					nickName: '', // 用户名
					phone: '', // 手机号
					checkCode: '', // 验证码
				}, // 上传数据
				
				// 验证是否通过
				verifyStatus: false, // 验证是否通过

			};
		},
		computed: {
			...mapGetters(['userInfo', 'isLogin']),
		},
		watch: {
			// // 设置上传文件的token
			// userInfo: {
			// 	handler() {
			// 		if (this.userInfo.loginToken) {
			// 			this.Authorization = `Bearer ${this.userInfo.loginToken}`
			// 		}
			// 	},
			// 	deep: true,
			// 	immediate: true
			// }
		},
		methods: {
			...mapActions(['getState', 'getUserInfo']),
			
			
			/**
			 * 头像填写
			 */
			async onChooseAvatar(e) {
				let that = this
				const {
					avatarUrl
				} = e.detail
				
				
				console.log('看看头像天地之',avatarUrl);



				// 临时地址转base64
				wx.getFileSystemManager().readFile({
					filePath: avatarUrl, //选择图片返回的相对路径
					encoding: 'base64', //编码格式
					success: res => { //成功的回调
						that.base64 = 'data:image/jpeg;base64,' + res.data

						// 上传图片bse64，获取在线链接
						setUploadBase64Api({
							headBase64: that.base64
						}).then(res2 => {
							if(res2.code !== 200){
								return
							}
							
							// 图片链接
							that.formData.avatarUrl = res2?.data
							
							
							// 图片回显
							this.avatarUrl = avatarUrl
						})
					}
				})
			},


			/**
			 * 修改昵称
			 */
			setInputData(e) {
				this.formData.nickName = e.detail.value
			},

			/**
			 * 手机号
			 */
			setInputData2(e) {
				this.formData.phone = e.detail.value
			},

			/**
			 * 验证码
			 */
			setInputData3(e) {
				if(e.detail.value.length === 4){
					this.codeValue = e.detail.value
					
					this.formData.checkCode = e.detail.value
					
					// 验证短信验证码是否正确
					// this.phoneCodeFinish()
				}
			},


			/**
			 * 完成
			 */
			async submit() {
				
				// 校验是否为空
				this.getVerifyStatus()
				
				// 如果校验不通过就不运行
				if(!this.verifyStatus){
					return
				}

				const res = await setUserUpdate({...this.formData})
				if(res.code !== 200) {
					this.$public.showText(res.msg || '修改失败')
					return
				}
				
				
				// 查询登录信息
				this.getUserInfo()
				
				
				// 如果提交成功就跳转首页
				uni.switchTab({
					url: '/pages/myTab/index'
				});

			},
			
			/**
			 * 校验是否有空
			 */
			getVerifyStatus(){
				let str = ''
				for(let key in this.formData){
					switch (key){
						case 'avatarUrl' : {
							str = '用户头像不能为空'
						}
						break;
						case 'nickName' : {
							str = '用户昵称不能为空'
						}
						break;
						case 'phone' : {
							str = '手机号码不能为空'
						}
						break;
						case 'checkCode' : {
							str = '短信验证码不能为空'
						}
						break;

					}
				}
				
				if(str !== ""){
					this.$public.showText(str)
					this.verifyStatus = false
				}
				this.verifyStatus = true
				
				
			},
			


			/**
			 * 获取验证码
			 */
			async getCode() {
				
				// 如果禁止点击则不运行
				if(this.disabled) return

				// 正则验证电话
				if (!text.mobile(this.formData.phone)) {
					return this.$public.showText('请输入正确的电话号码')
				} else {

					// 设置验证码点击样式
					this.setCodeStyle(30)
					
					// 发送短信
					this.getAuthCreateCode(this.formData.phone)
				}
			},
			/**
			 * 设置获取验证码点击样式
			 */
			setCodeStyle(val) {
				this.disabled = true
				let that = this

				let num = val
				this.tips = num + 's获取'
				let timeOut = setInterval(() => {
					num--
					that.tips = num + 's获取'
				}, 1000)


				setTimeout(() => {
					clearInterval(timeOut)
					that.tips = '重新获取'
					this.disabled = false
				}, val * 1000)
			},

			/**
			 * 发送短信
			 */
			async getAuthCreateCode(params) {
				try {
					const res = await getAuthCreateCodeApi(params,{type:1})
				} catch (err) {
					console.log(err);
				}
			},
			/**
			 * 验证码输入结束
			 */
			// async phoneCodeFinish() {
			// 	try {
			// 		const res = await getAuthregisterApi({
			// 			phone: this.formData.phone,
			// 			phoneCode: this.codeValue,
			// 			type: 1, // 注册时传type
			// 		})

			// 		if (res.code !== 200) {
			// 			this.codeValue = ''
			// 			return
			// 		}
					
			// 		this.verifyStatus = true
			// 	} catch (err) {
			// 		console.log(err);
			// 	}

			// },


		}
	}
</script>

<style lang="less" scoped>
	.perfectMessage {
		#padding(48rpx 0 0 0);
		background: linear-gradient(180deg, rgba(238, 212, 215, 0.8) -3%, rgba(238, 212, 215, 0.2) 100%);
		min-height: 100vh;
		
		// 头像
		.avatar-wrapper{
			#box(80%,400rpx,-,none,none);
			#padding(0);
			
			&:after{
				border:none;
			}
			
			.avatar{
				#box(100%);
			}
		}
		
		.input{
			#box(-,88rpx,0,-);
			margin: 24rpx;
			border-bottom: 2rpx solid rgba(#000,.1);
			// border: 1px solid #999;
			
			input{
				height: 88rpx;
				#font(22rpx,#999);
				// #padding(0 0 0 24rpx);
			}
		}
		
		.code{
			#flex(-,space-between,center);
			
			.code-input{
				width: 70%;
			}
			
			.code-button{
				#font(24rpx,#fff);
			}
		}
		
		
		.button{
			margin: 64rpx 64rpx;
			background: linear-gradient(180deg, #E27C8A 0%, #EC606F 100%) !important;
			#box(-,88rpx,100rpx);
			#font(36rpx,#fdf3f3,400);
			#flex(-,center,center);
		}
		
	}
</style>

